<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>弹性项目</title>
        <style type="text/css">
            .wrapper{ margin: 25px auto; border: 1px solid blue; box-shadow: 0 0 20px -10px blue;}
            p { text-align: center; font-weight: bold;}
            /* 设置 display 为 flex 是为了让元素成为 弹性容器 (flex container) */
            .flex-container { display: flex; margin: 15px auto; border: 1px solid gray; width: 400px; height: 400px;}
            .flex-item:nth-child(2n) { background: #dfdfdf;}
            .flex-item:nth-child(2n+1) { background: #ff8;}
            /* 以水平方向从左到右为 弹性容器 主轴的方向 */
            .direction-row { flex-direction: row; }
            /* 两个"班级名称"中间没有任何分隔符，表示元素的class属性值中既包含 direction-row 又包含 first */
            /* flex-basis: 设置 弹性项目 伸缩基准值 */
            .direction-row.first span { flex-basis: 100px; flex-shrink: 1; }
            /* flex-shrink: 设置 弹性项目 收缩比率 */
            .direction-row.first span:first-child { flex-shrink: 2; }
            .direction-row.first span:last-child { flex-shrink: 2; }

            /* flex-basis: 设置 弹性项目 伸缩基准值 */
            .direction-row.second span { flex-basis: 100px; }
            /* flex-grow: 设置 弹性项目 扩展比率 */
            .direction-row.second span:nth-child(1) { flex-grow: 1; }
            .direction-row.second span:nth-child(2) { flex-grow: 1; }
            .direction-row.second span:nth-child(3) { flex-grow: 3; }

            /* 以垂直方向从上到下为 弹性容器 主轴的方向 */
            .direction-column { flex-direction: column; }
            /* flex-basis: 设置 弹性项目 伸缩基准值 */
            .direction-column.first span { flex-basis: 200px; }
            .direction-column.first span:nth-child(1) { flex-shrink: 2; }
            .direction-column.first span:nth-child(2) { flex-shrink: 2; }
            .direction-column.first span:nth-child(3) { flex-shrink: 1; }

            
            /* 以垂直方向从上到下为 弹性容器 主轴的方向 */
            .direction-column { flex-direction: column; }
            /* flex-basis: 设置 弹性项目 伸缩基准值 */
            .direction-column.second span { flex-basis: 80px; }
            .direction-column.second span:nth-child(1) { flex-grow: 1; order: 3; }
            .direction-column.second span:nth-child(2) { flex-grow: 1; order: 2;}
            .direction-column.second span:nth-child(3) { flex-grow: 2; order: 1;}
        </style>
    </head>
    <body>
        
        <div class="wrapper">
            <p>弹性容器的主轴(main axis)是水平方向从左到右(flex-direction: row)</p>
            <!-- 同一个 class 属性中可以包含多个"班级名称"，它们之间使用空格隔开即可 -->
            <div class="flex-container direction-row first">
                <span class="flex-item">A</span>
                <span class="flex-item">B</span>
                <span class="flex-item">C</span>
                <span class="flex-item">D</span>
                <span class="flex-item">E</span>
            </div>

            <div class="flex-container direction-row second">
                <span class="flex-item">1</span>
                <span class="flex-item">2</span>
                <span class="flex-item">3</span>
            </div>

            <div class="flex-container direction-row third">
                <span class="flex-item">X</span>
                <span class="flex-item">Y</span>
                <span class="flex-item">Z</span>
            </div>
        </div>

        <div class="wrapper">
            <p>弹性容器的主轴(main axis)是垂直方向从上到下(flex-direction: column)</p>
            <div class="flex-container direction-column first">
                <span class="flex-item">A</span>
                <span class="flex-item">B</span>
                <span class="flex-item">C</span>
            </div>

            <div class="flex-container direction-column second">
                <span class="flex-item">1</span>
                <span class="flex-item">2</span>
                <span class="flex-item">3</span>
            </div>

            <div class="flex-container direction-column third">
                <span class="flex-item">X</span>
                <span class="flex-item">Y</span>
                <span class="flex-item">Z</span>
            </div>
        </div>
        
    </body>
</html>